<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加元素</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                // $("p").prepend("在开头追加文本");
                $("p").append(" <b>追加文本</b>");
            });

            $("#btn2").click(function () {
                $("ol").append("<li>追加列表项</li>");
            });
        });


        // 通过 append() 和 prepend() 方法添加若干新元素
        function appendText() {
            var txt1 = "<p>文本-1。</p>";              // 使用 HTML 标签创建文本
            var txt2 = $("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
            var txt3 = document.createElement("p");
            txt3.innerHTML = "文本-3。";               // 使用 DOM 创建文本 text with DOM
            $("body").append(txt1, txt2, txt3);        // 追加新元素
        }


        // 通过 after() 和 before() 方法添加若干新元素
        function afterText() {
            var txt1 = "<b>I </b>";                    // 使用 HTML 创建元素
            var txt2 = $("<i></i>").text("love ");     // 使用 jQuery 创建元素
            var txt3 = document.createElement("big");  // 使用 DOM 创建元素
            txt3.innerHTML = "jQuery!";
            $("img").after(txt1, txt2, txt3);          // 在图片后添加文本
        }
    </script>
</head>

<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button id="btn1">添加文本</button>
    <button id="btn2">添加列表项</button>



    <p>这是一个段落。</p>
    <button onclick="appendText()">追加文本</button>
</body>

</html>